<template>
  <!-- <div v-if="isDev">
    <p class="tips">在测试环境下，这里不可用！</p>
  </div> -->
  <div>
    <data-form :formConfig="formConfig" v-model="formData" ref="form" :rules="pushRule"></data-form>
    <el-button type="primary" @click="fullPush">全量推送</el-button>
    <search-list :api-url="$url.PushList" :itemPerRow="8" ref="pushlist">
      <el-table-column label="推送标题" prop="title"></el-table-column>
      <el-table-column label="推送副标题" prop="subtitle"></el-table-column>
      <el-table-column label="落地页" prop="payload"></el-table-column>
      <el-table-column label="发送状态" prop="pushed">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['pushSl'](scope.row.pushed).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="operator"></el-table-column>
      <el-table-column label="计划推送时间" prop="sendAt"></el-table-column>
      <el-table-column label="实际推送时间" prop="pushedAt"></el-table-column>
      <el-table-column label="操作时间" prop="createdAt"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="operation">
            <span @click="editItem(scope.row)" v-if="!scope.row.pushed">编辑</span>
            <span @click="deleteItem(scope.row)" v-if="!scope.row.pushed">删除</span>
          </div>
        </template>
      </el-table-column>
    </search-list>
    <el-dialog :visible="pushShow" width="500px" :before-close="close" v-if="pushShow">
      <data-form
        :formConfig="formConfigDailog"
        v-model="formDetailData"
        ref="formDetail"
        :rules="detailRules"
      ></data-form>
      <div>
        <el-button type="primary" @click="confirmPush">确认推送</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataForm from 'comp/DynamicForm';
  import { FormRuleConf } from '@/config';
  export default {
    components: {
      DataForm,
    },
    data() {
      const APP_SCHEME = [
        { value: 'mtjimu://works?id=', label: '作品' },
        { value: 'mtjimu://topic?id=', label: '话题详情' },
        { value: 'mtjimu://opinion?id=', label: '观点详情' },
        { value: 'mtjimu://channel?id=', label: 'tab的频道页' },
        { value: 'mtjimu://subchannel?id=', label: '频道独立页' },
        { value: 'mtjimu://webview?url=', label: 'H5地址' },
      ];
      const APP_JUMP_TYPE = {
        key: 'scheme',
        type: 'appScheme',
        label: '落地页',
        value: ' ',
        options: APP_SCHEME,
        connect: {
          label: 'scheme',
          value: 'payload',
        },
      };
      return {
        ...FormRuleConf.Push,
        // isDev: process.env.NODE_ENV === 'development',
        formConfig: {
          inline: false,
          labelPosition: 'right',
          labelWidth: '',
          size: 'normal',
          statusIcon: true,
          disabled: false, // 表单是否可用
          formItemList: [
            {
              key: 'title',
              type: 'input',
              label: '标题',
            },
            {
              key: 'subtitle',
              type: 'input',
              subtype: 'textarea',
              label: '副标题',
            },
            {
              key: 'sendDate',
              type: 'datetime',
              label: '推送时间',
              valueFormat: 'yyyy-MM-dd HH:mm:ss',
            },
            APP_JUMP_TYPE,
            {
              key: 'payload',
              type: 'input',
              label: '完整跳转链接',
            },
            {
              key: 'audience',
              type: 'input',
              subtype: 'textarea',
              label: '',
              placeholder: '填写推送用户uuid,以英文逗号隔开',
            },
          ],
        },
        formConfigDailog: {
          inline: false,
          labelPosition: 'right',
          labelWidth: '',
          size: 'normal',
          statusIcon: true,
          disabled: false, // 表单是否可用
          formItemList: [
            {
              key: 'title',
              type: 'input',
              label: '标题',
            },
            {
              key: 'subtitle',
              type: 'input',
              subtype: 'textarea',
              label: '副标题',
            },
            {
              key: 'schemaUrl',
              type: 'input',
              label: '落地页',
            },
          ],
        },
        formData: {},
        formDetailData: {},
        pushShow: false,
      };
    },
    methods: {
      // 编辑还没发送出去的
      editItem(item) {
        this.$service.PushDetail({ id: item.id }).then((res) => {
          this.formData = res;
          this.formData.sendDate = res.sendAt;
        });
      },

      // 删除还没发送出去的
      deleteItem(item) {
        this.$confirm('确定删除该条推送吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$service.PushDelete({ id: item.id }).then((res) => {
              this.$refs.pushlist.getList();
              this.$message.success('删除成功');
            });
          })
          .catch(() => {});
      },

      close() {
        this.pushShow = false;
        this.formDetailData = {};
      },
      fullPush() {
        this.$refs.form.$children[0].validate((valid) => {
          if (valid) {
            this.pushShow = true;
            this.formDetailData.title = this.formData.title;
            this.formDetailData.subtitle = this.formData.subtitle;
            this.formDetailData.schemaUrl = this.formData.payload;
          }
        });
      },
      confirmPush() {
        this.$service.PushSubmit({ ...this.formData }).then((res) => {
          this.pushShow = false;
          this.$message.success('推送成功');
          this.$refs.pushlist.getList();
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-form-item__label {
    color: #333;
    font-size: 16px;
  }
  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    margin-left: 120px;
  }

  .operation {
    span {
      color: #409eff;
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>
